<template>
  <el-row class="text-center comStep">
    <div class="stepItem" :key="index" v-for="(v, index) in titleList" :class="{active: active >= index + 1}">
      <p>{{index + 1}}.{{v}}</p>
    </div>
  </el-row>
</template>

<script>
export default {
  name: "Step",
  /**
   * 传入完成节点和节点名称的List
   */
  props: {
    active: {
      type: Number, default: () => {
      }
    },
    titleList: {
      type: Array, default: () => {}
    }
  }
}
</script>

<style lang="scss">
  .comStep{
    display: flex;
    justify-content: center;
    .stepItem{
      width: 160px;
      height: 50px;
      p{
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
      }
      background-image: url("../assets/dataResourceDetail/stepOther.png");
    }
    .stepItem:first-child {
      background-image: url("../assets/dataResourceDetail/stepOneBackground.png");
    }
    .active{
      background-image: url("../assets/dataResourceDetail/stepOtherActive.png");
    }
  }
</style>
